/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef } from 'react';
import { Collapse } from 'antd';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import 'highlight.js/styles/atom-one-light.css';
import hoc1 from '@/assets/images/advanceReact/hoc1.png';
import hoc2 from '@/assets/images/advanceReact/hoc2.png';
import render_props from '@/assets/images/advanceReact/render_props.png';
import render_props_exemple from '@/assets/images/advanceReact/render_props_exemple.png';
import render_props_exemple2 from '@/assets/images/advanceReact/render_props_exemple2.png';
import render_props_prior from '@/assets/images/advanceReact/render_props_prior.png';

import './index.less';

const { Panel } = Collapse;
const REACT_ELEMENT_TYPE = Symbol(React.element);
const RESERVED_PROPS = {};
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (error) {
        console.log(error);
      }
    }
    return ''; // 使用额外的默认转义
  },
});

export default function DesignMode() {
  return (
    <div className="advance-react-wrapper">
      <Collapse defaultActiveKey={['1', '2', '3']}>
        <Panel header="1、高阶组长（HOC)" key="1">
          <code>高阶组件(HOC)</code>
          是React中用于复用组件逻辑的一种高级技巧。HOC自身不是ReactAPl的一部分，它是一种基于React的组合特性而形成的设计模式。
          <p>
            概念上沿袭了高阶函数<code>(Higher-Order Function)</code>
            :接收函数作为输入，或者输出另一个函数的一类函数。
          </p>
          <img src={hoc1} alt="" width="40%" />
          <img src={hoc2} alt="" width="40%" />
        </Panel>
        <Panel header="2、Render Props" key="2">
          术语“renderprop”是指一种在React组件之间使用一个值为函数的prop共享代码的简单技术。
          <p>
            高阶组件的使用姿势是用“函数”包裹“组件”而render
            props恰恰相反，它强调的是用“组件”包裹“函数”。
          </p>
          <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
            <img src={render_props} alt="" width="30%" />
            <img src={render_props_exemple} alt="" width="30%" />
            <p>
              1、render props的载体应该是一个React组件,这一点是与高阶组件不同的
              <br />
              2、render props组件正常工作的前提是它的子组件需要以函数形式存在
            </p>
          </div>
          <div>
            <img src={render_props_exemple2} alt="" width="30%" />
            函数并不一定要作为子组件传入，它也可以以任意属性名传入 只要render
            props组件可以感知到它就行
          </div>
          <p>
            相较于HOC，render
            props将是你更好的选择，因为它更灵活，在高阶组件中，目标组件对于数据的获取没有主动权，
            数据的分发逻辑全部收敛在高阶组件的内部。在render
            props中，除了父组件可以对数据进行分发处理之外，子组件也可以选择性地对数据进行接收。
          </p>
          <p>
            在软件设计模式中，有一个非常重要的原则，叫“开放封闭原则”，一个好的模式，应该尽可能做到对拓展开放，对修改封闭。处理同样的需求
            render props就能够在保全“开放封闭”原则的基础上帮我们达到目的。
          </p>
          <img src={render_props_prior} alt="" width="50%" />
        </Panel>
        <Panel header="3、剥离有状态与无状态组件" key="3">
          <p>
            <code>单一职责原则</code>
            又叫“单一功能原则”:它指的是一个类或者模块应该有且只有一个改变的原因。
          </p>
          <p>
            <code>函数组件</code>顾名思义，就是以函数的形态存在的React组件，早期并没有React
            Hooks的加持，函数组件内部无法定义和维护state因此它还有一个别名叫“无状态组件”。
          </p>
          <p>
            有时候也会把有状态组件和无状态组件叫做“容器组件”和“展示组件”，目的就是把数据处理和界面渲染这两个工作剥离开来
          </p>
          <p></p>
        </Panel>
      </Collapse>
    </div>
  );
}
